import React from 'react';
import { Modal, Collapse} from 'antd';
import ProForm, {  ProFormText, ProFormDatePicker} from '@ant-design/pro-form';
import orderUpdate from '../../func/order_update';

interface UpdateFormProps {
  modalVisible: boolean;
  orderkey:any;
  values:any;
  onCancel: () => void;
}

const UpdateForm: React.FC<UpdateFormProps> = (props) => {

const { Panel } = Collapse;
  return (
    <Modal
      destroyOnClose
      title={"编辑用户"}
      visible={props.modalVisible}
      onCancel={() => props.onCancel()}
      onOk={() => props.onCancel()}
    >
      <ProForm
        initialValues={{
          order_id: props.values.order_id,
          custom_name: props.values.custom_name,
          custom_name_number: props.values.custom_name_number,
          custom_company: props.values.custom_company,
          custom_company_number: props.values.custom_company_number,
          custom_phone: props.values.custom_phone,
          order_date: props.values.order_date,
        }}
        onFinish={async (values) => {
          values["id"]=props.orderkey;
          orderUpdate(values);
        }}
      >
           
       <ProFormText
            width="md"
            name="order_id"
            label="订单号"
          />
       <ProFormText
            width="md"
            name="custom_name"
            label="联络人"
          />
       <ProFormText
            width="md"
            name="custom_name_number"
            label="业务编号"
          />
       <ProFormText
            width="md"
            name="custom_company"
            label="客户公司名称"
          />
       <ProFormText
            width="md"
            name="custom_company_number"
            label="客户公司编号"
          />
       <ProFormText
            width="md"
            name="custom_phone"
            label="联系电话"
          />
       <ProFormDatePicker
            width="md"
            name="order_date"
            label="订单日期"
          />
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;
